<template>
	<div class="forum-preview"
		:style='{ "width": "100%", "padding": "30px 7% 40px", "margin": "0px auto", "position": "relative", "background": "#fff" }'>
		<div
			:style='{ "width": "100%", "lineHeight": "56px", "textAlign": "center", "background": "url(http://codegen.caihongy.cn/20230921/eb4b56c7d55142c4b9339e032022bfb5.png) repeat-x center bottom", "height": "66px" }'>
			<div
				:style='{ "padding": "0 20px", "color": "#333", "textAlign": "center", "background": "none", "display": "inline-block", "width": "auto", "fontSize": "20px" }'>
				论坛</div>
		</div>
		<el-form
			:style='{ "padding": "10px 0", "margin": "10px 0", "alignItems": "center", "flexWrap": "wrap", "background": "none", "display": "flex", "width": "100%", "height": "auto" }'
			:inline="true" :model="formSearch" class="list-form-pv">
			<el-form-item>
				<el-input v-model="formSearch.title" placeholder="标题"></el-input>
			</el-form-item>
			<el-form-item>
				<el-input v-model="formSearch.theme" placeholder="主题"></el-input>
			</el-form-item>
			<el-form-item>
				<el-button class="searchBtn" type="primary" @click="getForumList(1)">
					<span class="icon iconfont icon-shouye-zhihui"
						:style='{ "color": "#fff", "margin": "0 10px 0 0", "fontSize": "14px" }'></span>
					查询
				</el-button>
				<el-button class="pubBtn" type="primary" @click="toForumAdd">
					<span class="icon iconfont icon-shouye-zhihui"
						:style='{ "color": "#333", "margin": "0 10px 0 0", "fontSize": "14px" }'></span>
					发布帖子
				</el-button>
			</el-form-item>
		</el-form>
		<div class="select2">
			<div :style='{ "padding": "0px", "margin": "4px 0", "borderColor": "#eee", "background": "none", "borderWidth": "0 0 1px", "width": "100%", "position": "relative", "borderStyle": "solid", "height": "auto" }'
				class="list" v-for="(item, index) in selectOptionsList" :key="index">
				<div :style='{ "padding": "0 5px", "color": "#555", "textAlign": "right", "display": "inline-block", "width": "auto", "lineHeight": "32px", "fontSize": "14px" }'
					class="label">{{ item.name }}：</div>
				<div :style='{ "width": "auto", "display": "inline-block", "height": "auto" }' class="item-body">
					<div class="item" @click="selectClick2(item, -1)" :class="item.check == -1 ? 'active' : ''">全部</div>
					<div class="item" @click="selectClick2(item, index1)" :class="item.check == index1 ? 'active' : ''"
						v-for="(item1, index1) in item.list" :key="index1">{{ item1.typename }}</div>
				</div>
			</div>
		</div>
		<div class="z-box" :style='{ "width": "100%", "padding": "0px" }'>
			<div class="section-content" v-for="item in forumList" :key="item.id" @click="toForumDetail(item)">
				<div :style='{ "overflow": "hidden", "whiteSpace": "nowrap", "color": "#333", "flex": "1", "width": "calc(100% - 260px)", "fontSize": "14px", "textOverflow": "ellipsis" }'
					class="item-style"><span style="color: blue;">#{{ item.theme }}</span> {{ item.title }}</div>
				<div :style='{ "color": "#999", "margin": "0 30px 0 0", "fontSize": "14px" }' class="item-style">
					发布人：{{ item.username }}</div>
				<div :style='{ "color": "#999", "fontSize": "14px" }' class="item-style">{{ item.addtime }}</div>
			</div>
		</div>

		<el-pagination background id="pagination" class="pagination" :pager-count="7" :page-size="pageSize"
			:page-sizes="pageSizes" prev-text="<" next-text=">" :hide-on-single-page="true"
			:layout='["total", "prev", "pager", "next", "sizes", "jumper"].join()' :total="total"
			:style='{ "padding": "5px 7%", "margin": "20px auto", "color": "#333", "textAlign": "center", "width": "100%", "clear": "both", "lineHeight": "40px", "fontWeight": "500", "height": "40px", "order": "50" }'
			@current-change="curChange" @prev-click="prevClick" @next-click="nextClick"></el-pagination>

	</div>
</template>

<script>
export default {
	//数据集合
	data() {
		return {
			selectOptionsList: [],
			formSearch: {
				title: '',
				theme: '',
				typeId: ''
			},
			layouts: '',
			forumList: [],
			total: 1,
			pageSize: 10, pageSizes: [10, 20, 30, 50],
			totalPage: 1
		}
	},
	created() {
		this.getForumList(1);
		this.$http.get('plate/type/list').then(res => {
			if (res.data.code == 0) {
				let fenleiOptions = res.data.data;
				this.selectOptionsList.push({ name: '板块', list: fenleiOptions, check: -1 })
			}
		});
	},
	//方法集合
	methods: {
		selectClick2(row, index) {
			row.check = index
			if (index == -1) {
				this.formSearch.typeId = ''
			} else {
				this.formSearch.typeId = row.list[index].id
			}
			this.getForumList(1)
		},
		getForumList(page) {
			let params = { page, limit: this.pageSize, isdone: '开放', sort: 'istop,toptime', order: 'desc,desc' };
			this.$http.get('forum/flist', { params: Object.assign(params, this.formSearch) }).then(res => {
				if (res.data.code == 0) {
					this.forumList = res.data.data.list;
					this.total = res.data.data.total;
					this.pageSize = res.data.data.pageSize; 
					this.pageSizes = [this.pageSize, this.pageSize * 2, this.pageSize * 3, this.pageSize * 5];
					this.totalPage = res.data.data.totalPage;
				}
			});
		},
		curChange(page) {
			this.getForumList(page);
		},
		prevClick(page) {
			this.getForumList(page);
		},
		nextClick(page) {
			this.getForumList(page);
		},
		toForumAdd() {
			this.$router.push('/index/forumAdd');
		},
		toForumDetail(item) {
			this.$router.push({ path: '/index/forumDetail', query: { id: item.id } });
		}
	}
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.section {
	width: 900px;
	margin: 0 auto;
}

.section-content {
	display: flex;
	justify-content: space-between;
	line-height: 60px;
	cursor: pointer;
	box-sizing: border-box;
	padding: 0 10px;
}

.section-content:hover {
	background-color: #E4E7ED;
	color: #fff;
}

.item-style {
	color: #909399;
	font-weight: 400;
}

.section-btn {
	text-align: right;
	margin-bottom: 15px;
	padding-right: 10px;
}

.forum-preview .el-form-item /deep/ .el-form-item__content {
	display: flex;
	align-items: center;
}

.forum-preview .el-form-item .el-input /deep/ .el-input__inner {
	border: 1px solid #eee;
	border-radius: 0px;
	padding: 0 10px;
	margin: 0;
	outline: none;
	color: #333;
	width: 280px;
	font-size: 14px;
	line-height: 36px;
	height: 36px;
}

.forum-preview .searchBtn {
	cursor: pointer;
	border: 0;
	border-radius: 0px;
	padding: 0px 15px;
	margin: 0 10px 0 0;
	outline: none;
	color: #fff;
	background: #1abc9e;
	width: auto;
	font-size: 14px;
	line-height: 36px;
	height: 36px;
}

.forum-preview .searchBtn:hover {
	background: #1abc9e80;
}

.forum-preview .pubBtn {
	cursor: pointer;
	border: 1px solid #ddd;
	border-radius: 0px;
	padding: 0px 15px;
	margin: 0 10px 0 0;
	outline: none;
	color: #333;
	background: #fcfcfc;
	width: auto;
	font-size: 14px;
	line-height: 36px;
	height: 36px;
}

.forum-preview .pubBtn:hover {
	background: #33333310;
}

.forum-preview .z-box .section-content {
	cursor: pointer;
	padding: 0 20px;
	margin: 0 0 10px;
	color: #333;
	display: flex;
	border-color: #f6f6f6;
	line-height: 40px;
	background: #fcfcfc;
	width: 100%;
	border-width: 1px;
	align-items: center;
	border-style: solid;
	height: 40px;
}

.forum-preview .z-box .section-content:hover {
	color: #fff;
	background: #e4e7ed20;
}

#pagination.el-pagination /deep/ .el-pagination__total {
	margin: 0 10px 0 0;
	color: #666;
	font-weight: 400;
	display: inline-block;
	vertical-align: top;
	font-size: 13px;
	line-height: 28px;
	height: 28px;
}

#pagination.el-pagination /deep/ .btn-prev {
	border: none;
	border-radius: 2px;
	padding: 0;
	margin: 0 5px;
	color: #666;
	background: #f4f4f5;
	display: inline-block;
	vertical-align: top;
	font-size: 13px;
	line-height: 28px;
	min-width: 35px;
	height: 28px;
}

#pagination.el-pagination /deep/ .btn-next {
	border: none;
	border-radius: 2px;
	padding: 0;
	margin: 0 5px;
	color: #666;
	background: #f4f4f5;
	display: inline-block;
	vertical-align: top;
	font-size: 13px;
	line-height: 28px;
	min-width: 35px;
	height: 28px;
}

#pagination.el-pagination /deep/ .btn-prev:disabled {
	border: none;
	cursor: not-allowed;
	border-radius: 2px;
	padding: 0;
	margin: 0 5px;
	color: #C0C4CC;
	background: #f4f4f5;
	display: inline-block;
	vertical-align: top;
	font-size: 13px;
	line-height: 28px;
	height: 28px;
}

#pagination.el-pagination /deep/ .btn-next:disabled {
	border: none;
	cursor: not-allowed;
	border-radius: 2px;
	padding: 0;
	margin: 0 5px;
	color: #C0C4CC;
	background: #f4f4f5;
	display: inline-block;
	vertical-align: top;
	font-size: 13px;
	line-height: 28px;
	height: 28px;
}

#pagination.el-pagination /deep/ .el-pager {
	padding: 0;
	margin: 0;
	display: inline-block;
	vertical-align: top;
}

#pagination.el-pagination /deep/ .el-pager .number {
	cursor: pointer;
	padding: 0 4px;
	margin: 0 5px;
	color: #666;
	display: inline-block;
	vertical-align: top;
	font-size: 13px;
	line-height: 28px;
	border-radius: 2px;
	background: #f4f4f5;
	text-align: center;
	min-width: 30px;
	height: 28px;
}

#pagination.el-pagination /deep/ .el-pager .number:hover {
	cursor: pointer;
	padding: 0 4px;
	margin: 0 5px;
	color: #fff;
	display: inline-block;
	vertical-align: top;
	font-size: 13px;
	line-height: 28px;
	border-radius: 2px;
	background: #1abc9e;
	text-align: center;
	min-width: 30px;
	height: 28px;
}

#pagination.el-pagination /deep/ .el-pager .number.active {
	cursor: default;
	padding: 0 4px;
	margin: 0 5px;
	color: #FFF;
	display: inline-block;
	vertical-align: top;
	font-size: 13px;
	line-height: 28px;
	border-radius: 2px;
	background: #1abc9e;
	text-align: center;
	min-width: 30px;
	height: 28px;
}

#pagination.el-pagination /deep/ .el-pagination__sizes {
	display: inline-block;
	vertical-align: top;
	font-size: 13px;
	line-height: 28px;
	height: 28px;
}

#pagination.el-pagination /deep/ .el-pagination__sizes .el-input {
	margin: 0 5px;
	width: 100px;
	position: relative;
}

#pagination.el-pagination /deep/ .el-pagination__sizes .el-input .el-input__inner {
	border: 1px solid #DCDFE6;
	cursor: pointer;
	padding: 0 25px 0 8px;
	color: #606266;
	display: inline-block;
	font-size: 13px;
	line-height: 28px;
	border-radius: 3px;
	outline: 0;
	background: #FFF;
	width: 100%;
	text-align: center;
	height: 28px;
}

#pagination.el-pagination /deep/ .el-pagination__sizes .el-input span.el-input__suffix {
	top: 0;
	position: absolute;
	right: 0;
	height: 100%;
}

#pagination.el-pagination /deep/ .el-pagination__sizes .el-input .el-input__suffix .el-select__caret {
	cursor: pointer;
	color: #C0C4CC;
	width: 25px;
	font-size: 14px;
	line-height: 28px;
	text-align: center;
}

#pagination.el-pagination /deep/ .el-pagination__jump {
	margin: 0 0 0 24px;
	color: #606266;
	display: inline-block;
	vertical-align: top;
	font-size: 13px;
	line-height: 28px;
	height: 28px;
}

#pagination.el-pagination /deep/ .el-pagination__jump .el-input {
	border-radius: 3px;
	padding: 0 2px;
	margin: 0 2px;
	display: inline-block;
	width: 50px;
	font-size: 14px;
	line-height: 18px;
	position: relative;
	text-align: center;
	height: 28px;
}

#pagination.el-pagination /deep/ .el-pagination__jump .el-input .el-input__inner {
	border: 1px solid #DCDFE6;
	cursor: pointer;
	padding: 0 3px;
	color: #606266;
	display: inline-block;
	font-size: 14px;
	line-height: 28px;
	border-radius: 3px;
	outline: 0;
	background: #FFF;
	width: 100%;
	text-align: center;
	height: 28px;
}

.select2 .list .item-body .item {
	padding: 0 5px;
	color: #666;
	display: inline-block;
	font-size: 14px;
	line-height: 32px;
}

.select2 .list .item-body .item:hover {
	color: #1abc9e;
	background: none;
}

.select2 .list .item-body .item.active {
	color: #1abc9e;
	background: none;
}
</style>
